<template>
  <!-- 编辑弹窗 -->
  <a-drawer
    title="编辑围栏编辑"
    wrapClassName="editorGis-drawer-warp"
    width="500px"
    :maskClosable="false"
    :destroyOnClose="true"
    :mask="false"
    placement="right"
    :visible.sync="visible"
    v-bind="$attrs"
    v-on="$listeners"
    @close="_handleClose()"
  >
    <a-form-model :model="form">
      <!-- 港区列表 -->
      <a-form-model-item label="港区列表">
        <a-select
          v-model="form.district"
          placeholder="请选择港区"
          @change="_handlePortChange($event)"
        >
          <a-select-option
            :value="item.uuid"
            v-for="item in portSource"
            :key="item.uuid"
          >
            {{ item.portName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <!-- 功能区 -->
      <a-form-model-item label="功能区" v-if="form.district">
        <a-radio-group v-model="form.zone" @change="_handleFunctionalChange()">
          <a-radio :value="1">
            港区锚点位置
          </a-radio>
          <a-radio :value="2">
            港区实景
          </a-radio>
          <a-radio :value="3">
            港区规划
          </a-radio>
          <a-radio :value="4">
            动态监测
          </a-radio>
        </a-radio-group>
      </a-form-model-item>

      <!-- 港区锚点位置 -->
      <a-form-model-item
        label="锚点位置（点击模型自动获取，无需填写）"
        v-if="form.zone == 1 && form.district"
      >
        <a-input v-model="form.portMarketPositon" disabled type="textarea" />
      </a-form-model-item>

      <!-- 港区实景绘制 -->
      <a-form-model-item
        :label="
          `${
            form.zone == 2 ? '实景' : '规划'
          }区域列表（点击模型操作，无需填写）`
        "
        v-if="(form.zone == 2 || form.zone == 3) && form.district"
      >
        <div class="port-live-warp">
          <!-- 实景区域列表 -->
          <div class="port-live-header">
            <a-select
              :placeholder="`请选择${form.zone == 2 ? '实景' : '规划'}区域`"
              v-model="aliveCoode"
              style="width:250px"
              @change="_handlePortViewNameChange($event)"
            >
              <a-select-option
                :value="item.uuid"
                v-for="item in (form.zone == 2
                  ? portLiveSource
                  : portPlanSource
                ).list"
                :key="item.uuid"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
            <a-button
              class="add-button"
              type="primary"
              @click="addPortViewModal.visible = true"
            >
              新增
            </a-button>
            <a-button
              class="add-button"
              type="primary"
              @click="handleOkAddPortViewPoint()"
            >
              完成
            </a-button>
          </div>
          <!-- 点位列表 -->
          <div class="port-live-item">
            <div
              class="label"
              v-for="(item, index) in form.zone == 2
                ? portLivePointSource
                : portPlanPointSource"
              :key="index"
            >
              顶点{{ index + 1 }}
              <div class="del-button" @click="_handleDelPortViewPoint(index)">
                <a-icon type="close-circle" />
              </div>
            </div>
          </div>
        </div>
      </a-form-model-item>

      <!-- 动态监测设置 -->
      <a-form-model-item v-if="form.zone == 4 && form.district">
        <div class="dynamicMonitor-form-item">
          <a-button
            class="add-button"
            type="primary"
            @click="_handleDynamicMonitorOk()"
          >
            新增
          </a-button>
          <div class="dynamicMonitor-point-warp">
            <div
              class="dynamicMonitor-item"
              v-for="(item, index) in dynamicMonitor.list"
              :key="index"
            >
              <div class="index">{{ index + 1 }}</div>
              <a-select
                v-model="item.type"
                placeholder="请选择设备类型"
                @change="dynamicMonitorChange(item)"
              >
                <a-select-option
                  :value="item.type"
                  v-for="item in dynamicMonitorModal.list"
                  :key="item.type"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
              <!-- @click="_handleDelDynamicMonitorPreview(index)" -->
              <a-button
                type="danger"
                @click="_handleDelDynamicMonitorPoint(index)"
              >
                删除
              </a-button>
              <div class="tip-text">点击模型放置</div>
            </div>
          </div>
        </div>
      </a-form-model-item>
    </a-form-model>
    <div class="footer" v-if="form.district">
      <a-button type="primary" @click="_handleSaveData()">
        保存
      </a-button>
      <a-button>取消</a-button>
    </div>
    <!-- 新增区域弹窗 -->
    <a-modal
      v-model="addPortViewModal.visible"
      width="400px"
      destroyOnClose
      :maskClosable="false"
      wrapClassName="editorGis-addport-view-warp"
      :title="`新增${form.zone == 2 ? '实景' : '规划'}区域`"
      @ok="_handlePortViewOk()"
      @cancel="_handleResetPortViewForm()"
    >
      <a-form-model
        :model="addPortViewModal"
        :rules="addPortViewModal.rules"
        ref="portViewRuleForm"
      >
        <a-form-model-item label="名称" prop="name">
          <a-input
            v-model="addPortViewModal.name"
            :placeholder="`请输入${form.zone == 2 ? '实景' : '规划'}区域名称`"
          />
        </a-form-model-item>
        <a-form-model-item label="边框颜色" prop="borderColor">
          <a-input
            type="color"
            v-model="addPortViewModal.borderColor"
            placeholder="请选择颜色"
          />
          <span>色值：{{ addPortViewModal.borderColor }}</span>
        </a-form-model-item>
        <a-form-model-item label="填充颜色" prop="fillColor">
          <a-input
            type="color"
            v-model="addPortViewModal.fillColor"
            placeholder="请选择颜色"
          />
          <span>色值：{{ addPortViewModal.fillColor }}</span>
        </a-form-model-item>
        <a-form-model-item label="文字颜色" prop="textColor">
          <a-input
            type="color"
            v-model="addPortViewModal.textColor"
            placeholder="请选择颜色"
          />
          <span>色值：{{ addPortViewModal.textColor }}</span>
        </a-form-model-item>
        <a-form-model-item label="背景透明度" prop="opacity">
          <a-input
            type="number"
            v-model="addPortViewModal.opacity"
            placeholder="请输入透明度（范围0~1）"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-drawer>
</template>
<script>
export default {
  name: "CustomEditorDrawer",
  props: {
    //模型数据
    gisData: {
      type: Object,
      default: () => {},
    },
    //港区列表
    portSource: {
      type: Array,
      default: () => [],
    },
    //是否可见
    visible: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (!val) {
          this.form.district = undefined;
        }
      },
    },
    gisData: {
      handler(val) {
        let { district, zone } = this.form;
        let { elemPos } = val;
        //更新锚点数据
        if (district && zone == 1) {
          this.form.portMarketPositon = elemPos + "";
        }
        //港区实景
        if (zone == 2) {
          let { district } = this.form;
          let { portAliveSource, aliveCoode } = this;
          if (!aliveCoode) {
            this.$message.error("请选择实景区域！");
            return;
          }
          let list =
            portAliveSource.find((v) => v.uuid == district)?.list ?? [];
          let posList = list.find((v) => v.uuid == aliveCoode)?.posList ?? [];
          console.log(elemPos);
          posList.push(JSON.stringify(elemPos));
          this._handleAddLine();
        }

        //港区规划
        if (zone == 3) {
          let { district } = this.form;
          let { portAPlanSource, aliveCoode } = this;
          if (!aliveCoode) {
            this.$message.error("请选择实景区域！");
            return;
          }
          let list =
            portAPlanSource.find((v) => v.uuid == district)?.list ?? [];
          let posList = list.find((v) => v.uuid == aliveCoode)?.posList ?? [];
          posList.push(JSON.stringify(elemPos));
          this._handleAddLine();
        }

        //动态监测
        if (zone == 4) {
          let data = this.dynamicMonitor.list;
          if (data.length > 0) {
            let { elemPos } = val;
            let item = data?.[data.length - 1];
            let { type, uuid } = item;
            item.pos = elemPos;
            this.$parent.addAnc([{ pos: elemPos, type, uuid }]);
          }
        }
      },
    },
    portSource: {
      handler(val) {
        this.portAliveSource = [];
        this.portAPlanSource = [];
        this.dynamicMonitorSource = [];
        // 删除所有的自定义矢量对象
        // window.BlackHole3D && BlackHole3D.Geometry.delAllShps();
        val.forEach((v) => {
          let { portView, portPlan, uuid, equipment } = v;
          //实景
          this.portAliveSource.push({
            uuid: uuid,
            list: portView ? JSON.parse(portView) : [],
          });
          //规划
          this.portAPlanSource.push({
            uuid: uuid,
            list: portPlan ? JSON.parse(portPlan) : [],
          });
          //动态监测
          this.dynamicMonitorSource.push({
            uuid: uuid,
            list: equipment ? JSON.parse(equipment) : [],
          });
        });
      },
      immediate: true,
    },
  },
  computed: {
    //
    dynamicMonitor() {
      let { district } = this.form;
      let { dynamicMonitorSource } = this;
      return (
        dynamicMonitorSource.find((v) => v.uuid == district) ?? {
          list: [],
          uuid: "",
        }
      );
    },

    //实景区域列表
    portLiveSource() {
      let { district } = this.form;
      let { portAliveSource } = this;
      return (
        portAliveSource.find((v) => v.uuid == district) ?? {
          list: "",
          uuid: "",
        }
      );
    },
    //实景区域点位列表
    portLivePointSource() {
      let { district } = this.form;
      let { portAliveSource, aliveCoode } = this;
      let list = portAliveSource.find((v) => v.uuid == district)?.list ?? [];
      return list.find((v) => v.uuid == aliveCoode)?.posList ?? [];
    },

    //规划区域列表
    portPlanSource() {
      let { district } = this.form;
      let { portAPlanSource } = this;
      return (
        portAPlanSource.find((v) => v.uuid == district) ?? {
          list: "",
          uuid: "",
        }
      );
    },
    //规划区域点位列表
    portPlanPointSource() {
      let { district } = this.form;
      let { portAPlanSource, aliveCoode } = this;
      let list = portAPlanSource.find((v) => v.uuid == district)?.list ?? [];
      return list.find((v) => v.uuid == aliveCoode)?.posList ?? [];
    },
  },
  data() {
    return {
      //动态监测
      dynamicMonitorModal: {
        visible: false,
        type: undefined,
        list: [
          { type: 1, name: "枪机" },
          { type: 2, name: "球机" },
          { type: 3, name: "工程项目" },
        ],
        rules: {
          type: [
            { required: true, message: "请选择设备类型", trigger: "change" },
          ],
        },
      },
      dynamicMonitorSource: [],
      //新增实景区域弹窗
      addPortViewModal: {
        visible: false,
        name: "",
        borderColor: "#0090FF",
        fillColor: "#0090FF",
        textColor: "#ffffff",
        opacity: 0.5,
        rules: {
          name: [
            { required: true, message: "请输入实景区域名称", trigger: "blur" },
          ],
          borderColor: [
            { required: true, message: "请选择边框颜色", trigger: "blur" },
          ],
          fillColor: [
            { required: true, message: "请选择填充色", trigger: "blur" },
          ],
          textColor: [
            { required: true, message: "请选择文字颜色", trigger: "blur" },
          ],
          opacity: [
            {
              required: true,
              message: "请输入透明度（范围0~1）",
              trigger: "blur",
            },
          ],
        },
      },
      aliveCoode: undefined,
      //港区实景相关
      portAliveSource: [],
      //港区规划相关
      portAPlanSource: [],
      saveSuccess: false,
      form: {
        //港区
        district: undefined,
        //功能区
        zone: 1,
        //港区锚点位置
        portMarketPositon: undefined,
        //港区实景
        portView: [],
      },
    };
  },
  mounted() {},
  methods: {
    //绘制线
    _handleAddLine() {
      if (!BlackHole3D) {
        return;
      }
      let { district, zone } = this.form;
      let { portAliveSource, portAPlanSource, aliveCoode } = this;
      let list =
        (zone == 2 ? portAliveSource : portAPlanSource).find(
          (v) => v.uuid == district
        )?.list ?? [];
      let item = list.find((v) => v.uuid == aliveCoode);
      let { posList, uuid, borderColor } = item;
      let bColor = this.hexToRgba(borderColor);
      let posListArr = posList.map((v) => JSON.parse(v));
      console.log({ posListArr });
      //矢量文字信息
      var shpTextInfo = new BlackHole3D.REShpTextInfo();
      //矢量线信息
      var lineShpInfo = new BlackHole3D.RELineShpInfo();
      lineShpInfo.shpName = `line_${uuid}`;
      lineShpInfo.potList = posListArr;
      lineShpInfo.fillState = 0;
      lineShpInfo.lineClr = new BlackHole3D.REColor(
        bColor[0],
        bColor[1],
        bColor[2],
        255
      );
      lineShpInfo.textPos = -2;
      lineShpInfo.scrASDist = -1.0;
      lineShpInfo.scrVisDist = 12800;
      lineShpInfo.contactSce = false;
      lineShpInfo.lineWidth = 2;
      lineShpInfo.textInfo = shpTextInfo;
      lineShpInfo.groupName = `${zone == 2 ? "portView" : "portPlan"}`;
      BlackHole3D.Geometry.addPolylineShp(lineShpInfo);
    },

    //绘制面
    _handleAddPlane() {
      if (!BlackHole3D) {
        return;
      }
      let { district, zone } = this.form;
      let { portAliveSource, portAPlanSource, aliveCoode } = this;
      let list =
        (zone == 2 ? portAliveSource : portAPlanSource).find(
          (v) => v.uuid == district
        )?.list ?? [];
      let item = list.find((v) => v.uuid == aliveCoode);
      let {
        posList,
        uuid,
        borderColor,
        fillColor,
        opacity,
        name,
        textColor,
      } = item;
      let bColor = this.hexToRgba(borderColor);
      let fColor = this.hexToRgba(fillColor);
      let tColor = this.hexToRgba(textColor);
      let posListArr = posList.map((v) => JSON.parse(v));
      //矢量文字信息
      var shpTextInfo = new BlackHole3D.REShpTextInfo();
      shpTextInfo.text = name;
      shpTextInfo.texBias = [0, 0];
      shpTextInfo.fontName = `RealBIMFont001`;
      shpTextInfo.textClr = new BlackHole3D.REColor(
        tColor[0],
        tColor[1],
        tColor[2],
        255
      );
      shpTextInfo.textBorderClr = new BlackHole3D.REColor(0, 0, 0, 255);
      shpTextInfo.textBackMode = 0;
      shpTextInfo.textBackBorder = 0;
      shpTextInfo.textBackClr = new BlackHole3D.REColor(0, 0, 0, 0);
      //矢量线信息
      var lineShpInfo = new BlackHole3D.RELineShpInfo();
      lineShpInfo.shpName = `plane_${uuid}`;
      lineShpInfo.potList = posListArr;
      lineShpInfo.fillState = 1;
      lineShpInfo.lineClr = new BlackHole3D.REColor(
        bColor[0],
        bColor[1],
        bColor[2],
        255
      );
      lineShpInfo.fillClr = new BlackHole3D.REColor(
        fColor[0],
        fColor[1],
        fColor[2],
        opacity ? Math.abs(opacity) * 255 : 255
      );
      lineShpInfo.textPos = -2;
      lineShpInfo.scrASDist = -1.0;
      lineShpInfo.scrVisDist = 12800;
      lineShpInfo.contactSce = false;
      lineShpInfo.lineWidth = 2;
      lineShpInfo.textInfo = shpTextInfo;
      lineShpInfo.groupName = `${zone == 2 ? "portView" : "portPlan"}`;
      BlackHole3D.Geometry.addPolylineShp(lineShpInfo);
    },

    dynamicMonitorChange(item) {
      let { uuid, type, pos } = item;
      let ancName = `anc_${uuid}`;
      let ancInfo = BlackHole3D.Anchor.getAnc(ancName);
      if (ancInfo?.ancName) {
        //删除当前锚点
        BlackHole3D.Anchor.delAnc([ancName]);
        //重新添加
        this.$parent.addAnc([{ pos, type, uuid }]);
      }
    },

    //完成回绘制
    handleOkAddPortViewPoint() {
      let { district, zone } = this.form;
      let { portAliveSource, portAPlanSource, aliveCoode } = this;
      let list =
        (zone == 2 ? portAliveSource : portAPlanSource).find(
          (v) => v.uuid == district
        )?.list ?? [];
      let item = list.find((v) => v.uuid == aliveCoode);
      let { uuid } = item;
      item.drawComplete = 1;
      //创建面
      this._handleAddPlane();
      //删除线
      BlackHole3D.Geometry.delShp(`line_${uuid}`);
    },

    //删除实景区域点
    _handleDelPortViewPoint(index) {
      let { district, zone } = this.form;
      let { portAliveSource, portAPlanSource, aliveCoode } = this;
      let list =
        (zone == 2 ? portAliveSource : portAPlanSource).find(
          (v) => v.uuid == district
        )?.list ?? [];
      let item = list.find((v) => v.uuid == aliveCoode);
      let { posList, uuid } = item;
      posList = posList.filter((_, i) => i != index);
      item.posList = posList;
      if (posList.length < 2) {
        //删除
        BlackHole3D.Geometry.delShp(`line_${uuid}`);
      } else {
        //删除面
        BlackHole3D.Geometry.delShp(`plane_${uuid}`);
        //绘制点
        this._handleAddLine();
      }
    },

    //保存
    _handleSaveData() {
      let { portAliveSource, portAPlanSource, dynamicMonitorSource } = this;
      let { district, portMarketPositon } = this.form;
      let params = {
        portCoordinates: `[${portMarketPositon}]`,
        portView: JSON.stringify(
          (portAliveSource.find((v) => v.uuid == district)?.list ?? []).filter(
            (v) => v.drawComplete == 1 && v.posList && v.posList.length > 0
          )
        ),
        portPlan: JSON.stringify(
          (portAPlanSource.find((v) => v.uuid == district)?.list ?? []).filter(
            (v) => v.drawComplete == 1 && v.posList && v.posList.length > 0
          )
        ),
        equipment: JSON.stringify(
          dynamicMonitorSource.find((v) => v.uuid == district)?.list ?? []
        ),
      };
      this.$post(`/probusiness/lygPortArea/update?uuid=${district}`, params)
        .then((res) => {
          let { statusCode } = res;
          if (statusCode == 200) {
            this.$message.success("操作成功！");
          } else {
            this.$message.error("操作失败！");
          }
          this.saveSuccess = true;
        })
        .catch((_) => {
          this.saveSuccess = false;
        });
    },

    //监听港区切换
    _handlePortChange(uuid = "") {
      this.aliveCoode = undefined;
      if (!uuid) {
        return;
      }
      let { zone } = this.form;
      let itemPort = this.portSource.find((v) => v.uuid == uuid);
      //港区锚点位置
      if (zone == 1) {
        this.form.portMarketPositon = itemPort.portCoordinates + "";
      }
      //调整相机位置-对准当前港区
      if (BlackHole3D && itemPort) {
        this.setCamLocateTo(itemPort);
      }
    },

    //监听功能区切换
    _handleFunctionalChange() {
      let { zone } = this.form;
      switch (zone) {
        case 2:
          this.$parent.handleActive("LiveAction", "editor");
          break;

        case 3:
          this.$parent.handleActive("PlanningManage", "editor");
          break;

        case 4:
          this.$parent.handleActive("DynamicMonitor", "editor");
          break;

        default:
          break;
      }
      this.aliveCoode = undefined;
    },

    //设置相机方位
    setCamLocateTo(itemPort = {}) {
      let { camDir, camPos, camRotate } = itemPort;
      if (!camDir || !camPos || !camRotate) {
        return;
      }
      let camLoc = new BlackHole3D.RECamLoc();
      camLoc.camDir = JSON.parse(camDir);
      camLoc.camPos = JSON.parse(camPos);
      camLoc.camRotate = JSON.parse(camRotate);
      BlackHole3D.Camera.setCamLocateTo(camLoc, 0.5, 0);
    },

    //关闭
    _handleClose() {
      this.$emit("update:visible", false);
      if (!this.saveSuccess) {
        //还原数据
        // let { portLocationSourceCopy } = this.$parent;
        // this.$parent.portLocationSource = portLocationSourceCopy;
      } else {
        this.saveSuccess = false;
      }
    },

    //新增实景区域
    _handlePortViewOk() {
      this.$refs.portViewRuleForm.validate((valid) => {
        if (valid) {
          let uuid = this._getUUID(32, 32);
          let { district, zone } = this.form;
          let { portAliveSource, portAPlanSource } = this;
          let item = (zone == 2 ? portAliveSource : portAPlanSource).find(
            (v) => v.uuid == district
          );
          let {
            borderColor,
            fillColor,
            opacity,
            textColor,
          } = this.addPortViewModal;
          item.list.push({
            uuid: uuid,
            name: this.addPortViewModal.name,
            posList: [],
            borderColor,
            fillColor,
            opacity,
            textColor,
          });
          this.addPortViewModal.visible = false;
          this.aliveCoode = uuid;
          this._handleResetPortViewForm();
        } else {
          return false;
        }
      });
    },

    //新增动态监测
    _handleDynamicMonitorOk() {
      let uuid = this._getUUID(32, 32);
      let { district } = this.form;
      let { dynamicMonitorSource } = this;
      let item = dynamicMonitorSource.find((v) => v.uuid == district);
      item.list.push({
        uuid: uuid,
        type: undefined,
      });
      console.log(this.dynamicMonitor);
    },

    //删除监测点
    _handleDelDynamicMonitorPoint(index) {
      let { district } = this.form;
      let { dynamicMonitorSource } = this;
      let item = dynamicMonitorSource.find((v) => v.uuid == district);
      let { uuid } = item.list?.[index] ?? {};
      let ancName = `anc_${uuid}`;
      let ancInfo = BlackHole3D.Anchor.getAnc(ancName);
      item.list = item.list.filter((_, i) => i != index);
      if (ancInfo?.ancName) {
        //删除当前锚点
        BlackHole3D.Anchor.delAnc([ancName]);
      }
    },

    //预览监测点
    _handleDelDynamicMonitorPreview(index) {
      let { district } = this.form;
      let { dynamicMonitorSource } = this;
      let item = dynamicMonitorSource.find((v) => v.uuid == district);
      let itemPoint = item.list.find((_, i) => i == index);
      let { type } = itemPoint;
      console.log(itemPoint);
    },

    //监听实景区域切换
    _handlePortViewNameChange(e) {},

    _handleResetPortViewForm() {
      this.$refs.portViewRuleForm.resetFields();
    },

    //指定长度和基数
    _getUUID(len, radix) {
      var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(
        ""
      );
      var uuid = [],
        i;
      radix = radix || chars.length;
      if (len) {
        for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
      } else {
        var r;
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-";
        uuid[14] = "4";
        for (i = 0; i < 36; i++) {
          if (!uuid[i]) {
            r = 0 | (Math.random() * 16);
            uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
          }
        }
      }
      return uuid.join("");
    },

    //16进制颜色转rgb颜色
    hexToRgba(hex, opacity) {
      if (!hex) hex = "#ededed";
      let r = parseInt("0x" + hex.slice(1, 3));
      let g = parseInt("0x" + hex.slice(3, 5));
      let b = parseInt("0x" + hex.slice(5, 7));
      let rgba = "rgba(" + r + "," + g + "," + b + "," + (opacity ?? "1") + ")";
      return [r, g, b];
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.editorGis-addport-view-warp {
  .ant-form-item-children {
    input {
      &[type="color"] {
        width: 100px;
        cursor: pointer;
        margin-right: 10px;
      }
    }
  }
}
.editorGis-drawer-warp {
  /deep/.ant-form {
    .ant-form-item-label {
      label {
        font-weight: bold;
      }
    }
  }

  .dynamicMonitor-form-item {
    .dynamicMonitor-point-warp {
      padding: 20px 0 0 8px;
      .dynamicMonitor-item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .tip-text {
          font-size: 14px;
          color: #777474;
          white-space: nowrap;
          margin-left: 10px;
        }
        .index {
          margin-right: 10px;
        }
        button {
          margin-left: 10px;
        }
        .del-button {
          margin-left: 10px;
          cursor: pointer;
          width: 16px;
          height: 16px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          background: #ff4d4f;
          color: #fff;
          border-radius: 50%;
        }
      }
    }
  }

  .port-live-warp {
    padding: 0 20px;
    .port-live-header {
      display: flex;
      align-items: center;
      justify-content: center;
      .add-button {
        margin-left: 14px;
      }
    }
    .port-live-item {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      padding: 20px 0 0 8px;
      .label {
        height: 30px;
        display: flex;
        align-items: center;
        padding: 0 20px 0 10px;
        background: #e6f7ff;
        border: 1px solid #91d5ff;
        border-radius: 2px;
        margin: 0 16px 14px 0;
        flex-shrink: 0;
        white-space: nowrap;
        position: relative;
        color: #1890ff;
        user-select: none;
        .del-button {
          position: absolute;
          width: 16px;
          height: 16px;
          top: -7px;
          right: -7px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          background: #ff4d4f;
          color: #fff;
          border-radius: 50%;
        }
      }
    }
  }
  .footer {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    button {
      margin: 0 10px;
    }
  }
}
</style>
